/*css通过.找到class*/
/*css通过#找到id*/
/*css和html的注释注意区别？*/
.you {

    /*background-color: blueviolet;*/
}

.me {
    /*background-color: blue;*/
}


/*#lily {*/
/*    background-color: yellow;*/
/*}*/

/*#lucy {*/
/*    background-color: chartreuse;*/
/*}*/

/*.lily {*/
/*    background-color: green;*/
/*}*/

/*  级别  id属性的 >自定义属性 > class属性*/
/*    html标签里面自定定义属性，叫做自定义属性*/
/*div[mylily] {*/
/*    background-color: aqua;*/
/*}*/

/*div[mylucy] {*/
/*    background-color: red;*/
/*}*/
/*div[title=lucy] {*/
/*    background-color: red;*/
/*}*/

/*全局通配符  *代表所有标签 */
* {
    /*color: white;*/
}

/*body > div {*/
/*    background-color: green;*/
/*}*/
/*body     div:nth-child(2) {*/
/*    background-color: green;*/
/*}*/

/*    选择器：
1.类选择器  .class类名{}
2.id选择器  #id {}
3.属性选中  div[mylucy='a'] div[title=lucy] 属性不包括特殊属性：如id,class
4.* 通配符
5.子代选择器  body > div:nth-child(3)
6.后代选择器 body   div:nth-child(3) 拿到所有后代
*/
.two {
    background-color: green;
    width: 200px;
}

.font-red {
    color: greenyellow;
}

.doufu {
    background-image: url("/img/11_bo39.jpg");
    width: 400px;
    height: 400px;
    background-size: 100% 100%;
}

.banner {
    background-image: url("/img/banner_qtah.jpg");
    width: 400px;
    /*width: 1920px;*/
    /*height: 400px;*/
    /*高度应该相应的缩小*/
    height: calc(400 * 808px / 1920);
    background-size: 100% 100%;
}

.test {
    /*background-color: gray;*/
    /*16进制*/
    /*background-color: #b28e8e;*/
    /*background-color: rgb(227, 15, 15);*/
    /* a表示透明度  从0-1 */
    background-color: rgba(227, 15, 15, 0.5);
    height: 200px;
}

.img-two {

    /*边距：自己离其他div之间的距离*/
    /*  上右下左*/
    /*margin: 10px 20px 40px 30px;*/


    /*margin-right: 20px;*/
    /*margin-bottom: 40px;*/
    /*margin-top: 10px;*/
    /*margin-left: 30px;*/

    /*  上  左右  下*/
    /*margin: 10px 30px 40px;*/
    /*margin-right: 30px;*/
    /*margin-bottom: 40px;*/
    /*margin-top: 10px;*/
    /*margin-left: 30px;*/

    /*  上下  左右*/
    /*margin: 40px 30px;*/

    /*margin-right: 30px;*/
    /*margin-bottom: 40px;*/
    /*margin-top: 40px;*/
    /*margin-left: 30px;*/

    margin: 30px;
    /*margin-right: 30px;*/
    /*margin-bottom: 30px;*/
    /*margin-top: 30px;*/
    /*margin-left: 30px;*/

    /*    边框*/
    border: 5px solid red;
    /*    边框里面的和内容之间的距离叫做内边距*/

    padding: 50px 10px 15px 35px;


    /*padding-top: 50px;*/
    /*padding-right: 10px;*/
    /*padding-bottom: 15px;*/
    /*padding-left: 35px;*/


}

.test {
    font-size: 30px;
    color: green;
    font-weight: bold;
    font-family: 新宋体;
}

.test > div {
    width: 150px;
    height: 30px;
    border: 1px solid red;


}

.single-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*多行溢出*/
.many-over-two {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.many-over-four {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

#lily > div:nth-child(3) {
    width: 500px;
    border: 1px solid red;
}

#lucy > div:nth-child(1) {
    width: 500px;
    border: 1px solid red;
    background-color: red;
}
#lucy > div:nth-child(2) {
    width: 500px;
    border: 1px solid green;
    background-color: green;
}
#lucy > div:nth-child(3) {
    width: 800px;
    border: 1px solid rebeccapurple;
    background-color: rebeccapurple;
}
#lucy{
    display: flex;
    /*justify-content: flex-end;*/
    /*justify-content: center;*/
    /*flex-direction: column-reverse;*/
    flex-wrap: wrap;
    /*margin: 50px;*/
    border: 5px solid gray;
}
#lucy>div{
    margin: 10px;
}